.trade-chart{
	position: absolute;
	//top: 50%;
	left: 0;
	//margin-top: calc(-130px - 42px);
	width: 100%;
	border-top: solid 1px #1A1D27;
	border-bottom: solid 1px #1A1D27;

	.invisible{
		display: none;
	}

	.chart-type{
		height: 42px;
		line-height: 42px;
		color: #8991A2;
		background-color: #1F2A2C;
		font-size: 14px;
		box-sizing: border-box;
		padding: 0 10px;
		border-bottom: solid 1px #0A0D17;

		&:after{
			display: block;
			content: "";
			clear: both;
		}

		span{
			float: left;
			display: block;
			padding: 0 8px;
			height: 100%;
			border-bottom: solid 1px transparent;
		}

		.active{
			color: #EBECEC;
			border-bottom-color: #FA8722;
		}
	}

	.chart-container{
		position: relative;
		height: 260px;
		font-size: 0;
		line-height: 0;

		.switch{
			display: block;
			position: absolute;
			right: 0;
			top: 20px;
			z-index: 1;
			font-size: 13px;
			line-height: 1.2em;
			padding: 10px;
			color: #545454;

			&:before{
				display: block;
				padding-left: 20px;
				background-repeat: no-repeat;
				background-position: left center;
				background-size: 14px auto;
				background-image: url();
			}

			&[data-touch-move-action=view-detail]:before{
				content: "切换为 查看历史";
			}
			&[data-touch-move-action=view-history]:before{
				content: "切换为 查看详情";
			}
		}

		canvas{
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.detail-container{
		position: relative;
		padding: 5px 12px;
		font-size: 12px;
		margin-top: 10px;
	}
	.data-detail {
		display: none;
		color: #4e5b85;

		> span{
			display: block;
			&:before {
				content: attr(data-title);
			}
		}
	}
	&.trend .data-detail.trend{
		display: block;
	}
	&.k .data-detail.k{
		display: block;
	}
}